<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="bing" style="margin: 100px; width: 500px; height: 700px"></div>
      </el-col>
      <!-- <el-col :span="12">
        <div id="zhu" style="width: 500px; height: 800px"></div>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { bing, zhu } from "@/api/system/member";

export default {
  name: "EchartsComponent",
  data() {
    return {
      pName: [], // name值
      pValue: [], // value值
      myChartStyle: { float: "left", width: "100%", height: "400px" }, // 图表样式
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
      this.list();
    });
  },
  methods: {
    getList() {
      bing()
        .then((res) => {
          if (res.code === 200) {
            console.log("Received data:", res.data); // 添加日志输出
            this.myEachars(res.data);
          } else {
            console.error("Failed to get data:", res.message);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    list() {
      zhu()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.zhuzhuangtu(res.data);
          } else {
            console.error("Failed to get data:", res.message);
            this.zhuzhuangtu(null);
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    zhuzhuangtu(datms) {
      // 参数拼接
      var datas = [];
      var xData = [];
      if (datms === null) {
        datas.push(0, 0);
        xData.push("男", "女");
      } else {
        for (let i = 0; i < datms.length; i++) {
          datas.push(datms[i].count);
          xData.push(datms[i].gender);
        }
      }

      // 基本柱状图
      const option = {
        xAxis: {
          data: xData,
        },
        yAxis: {},
        series: [
          {
            type: "bar", // 形状为柱状图
            data: datas,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("zhu"));
      myChart.setOption(option);
      // 随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    myEachars(datm) {
      // 数据
      var datas = datm
        .filter((item) => ["已发放", "未发放"].includes(item.name))
        .map((item) => ({
          value: item.value,
          name: item.name,
        }));

      console.log("Processed data:", datas); // 添加日志输出

      // 基于准备好的dom，初始化echarts实例
      var bing = echarts.init(document.getElementById("bing"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "优惠卷状态",
        },
        legend: {
          top: "bottom",
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "优惠券数量",
            type: "pie",
            radius: "55%",
            roseType: "radius",
            center: ["50%", "60%"],
            // roseType: "radius", // 设置为 'radius' 使每个扇区的半径与其值成比例
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{d}%",
                },
              },
            },
            data: datas, // 将数据赋值给data
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      bing.setOption(option);

      // 随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        bing.resize();
      });
    },
  },
};
</script>
